<template>
  <!-- 用户购买流量明细 -->
  <div>
    <el-dialog :title="$t('流量包明细')" :visible.sync="dialogFlowBag" width="70%" :before-close="handleClose">
      <el-table v-loading="loading" :data="tableData">
        <el-table-column prop="userId" :label="$t('用户id')"></el-table-column>
        <el-table-column prop="flowId" :label="$t('流量包id')"></el-table-column>
        <el-table-column prop="flowPrice" :label="`${$t('流量包单价')}(CFP)`"></el-table-column>
        <el-table-column prop="flowAmount" :label="$t('流量包流量额度')"></el-table-column>
        <el-table-column prop="totalAmount" :label="`${$t('流量包总产值')}(CFP)`"></el-table-column>
        <el-table-column prop="predictAmountTo" :label="`${$t('每日预估产出')}(CFP)`">
          <template #default="{ row }">
            {{ row.predictAmountTo }}~{{row.predictAmountEnd  }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="predictAmountEnd" :label="`${$t('每日预估产出')}(CFP)`"></el-table-column> -->
        <el-table-column prop="flowNumber" :label="$t('购买数量')"></el-table-column>
        <el-table-column prop="purchaseFlowAmount" :label="`${$t('购买的总流量')}(GB)`"></el-table-column>
        <el-table-column prop="purchaseTotalAmount" :label="`${$t('购买的流量包总产值')}(CFP)`"></el-table-column>
        <el-table-column prop="purchaseTime" :label="$t('购买时间')"></el-table-column>
        <el-table-column prop="shareStatus" :label="$t('分享状态')">
          <template #default="{ row }">
            {{ row.shareStatus?$t('已分享'):$t('未分享') }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('状态')">
          <template #default="{ row }">
            {{ row.status?$t('有效'):$t('无效') }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentType" :label="$t('支付方式')">
          <template #default="{ row }">
            {{ row.paymentType===1?'CFP':'' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" :label="$t('描述')"></el-table-column>
        <el-table-column prop="createBy" :label="$t('创建人')"></el-table-column>
        <el-table-column prop="createTime" :label="$t('创建时间')"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </el-dialog>
  </div>
</template>
  <script>
import { getflowBagdetailApi } from "../../../../api/appuser/userList";
export default {
  props: {
    dialogFlowBag: Boolean,
    userid: String,
  },
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      loading: false,
    };
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit("update:dialogFlowBag", false);
    },
    async getflowBagdetail() {
      this.loading = true;
      const res = await getflowBagdetailApi({
        ...this.page,
        userId: this.userid,
      });
      console.log(res);
      this.total = res.total;
      this.tableData = res.rows;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getflowBagdetail();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getflowBagdetail();
    },
  },
};
</script>
  <style lang='' scoped>
</style>